<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Material Admin</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/css/http_lib.sinaapp.com_js_bootstrap_4.2.1_css_bootstrap.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <script src="/js/community.js"></script>
  </head>
  <body>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎注册</h1>
                  </div>
                  <p></p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                    <div class="form-group">
                      <input id="register-phone" class="input-material" type="text" name="registerPhone" placeholder="请输入手机号" >
								      <div class="invalid-feedback">
								        	手机号应为11位
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="请输入密码"   >
                    	<div class="invalid-feedback">
								        	密码必须在6~20位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="确认密码"   >
                    	<div class="invalid-feedback">
								        	两次密码必须相同 且在6~20位之间
								      </div>
                    </div>
<!--                  <div class="form-group">-->
<!--                    <input id="register-sms" class="input-material" type="text" name="registerSMS" placeholder="验证码" >-->
<!--                    <div class="invalid-feedback">-->
<!--                      验证码错误!-->
<!--                    </div>-->
<!--                  </div>-->
                    <div class="form-group">
                      <button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button>
                    </div>
                  <div id="errorMessage"></div>
                  <small>已有账号?</small><a href="userLogin" class="signup">&nbsp;登录</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="/js/http_s1.pstatp.com_cdn_expire-1-M_jquery_1.10.2_jquery.js"></script>
    <script src="/js/http_lib.sinaapp.com_js_bootstrap_4.2.1_js_bootstrap.js"></script>
    <script>
    	$(function(){
    		/*错误class  form-control is-invalid
    		正确class  form-control is-valid*/
    		var flagPhone=false;
    		var flagPas=false;
    		var flagPass=false;
    		// var flagSMS=false;
    		/*验证用户名*/
    		var phone,passWord,passWords;
    		$("#register-phone").change(function(){
    			phone=$("#register-phone").val();
    			if(phone.length !== 11){
    				$("#register-phone").removeClass("form-control is-valid")
    				$("#register-phone").addClass("form-control is-invalid");
    				flagPhone=false;
    			}else{
    				$("#register-phone").removeClass("form-control is-invalid")
    				$("#register-phone").addClass("form-control is-valid");
    				flagPhone=true;
    			}
    		})
    		/*验证密码*/
    		$("#register-password").change(function(){
    			passWord=$("#register-password").val();
    			if(passWord.length<6||passWord.length>20){
    				$("#register-password").removeClass("form-control is-valid")
    				$("#register-password").addClass("form-control is-invalid");
    				flagPas=false;
    			}else{
    				$("#register-password").removeClass("form-control is-invalid")
    				$("#register-password").addClass("form-control is-valid");
    				flagPas=true;
    			}
    		})
    		/*验证确认密码*/
    		$("#register-passwords").change(function(){
    			passWords=$("#register-passwords").val();
    			if((passWord!=passWords)||(passWords.length<6||passWords.length>20)){
    				$("#register-passwords").removeClass("form-control is-valid")
    				$("#register-passwords").addClass("form-control is-invalid");
    				flagPass=false;
    			}else{
    				$("#register-passwords").removeClass("form-control is-invalid")
    				$("#register-passwords").addClass("form-control is-valid");
    				flagPass=true;
    			}
    		})
          /*验证短信*/
          // $("#register-sms").change(function(){
          //   SMS=$("#register-sms").val();
          //   if((SMS.length !== 6)){
          //     $("#register-sms").removeClass("form-control is-valid")
          //     $("#register-sms").addClass("form-control is-invalid");
          //     flagSMS=false;
          //   }else{
          //     $("#register-sms").removeClass("form-control is-invalid")
          //     $("#register-sms").addClass("form-control is-valid");
          //     flagSMS=true;
          //   }
          // })
    		
    		//注册
    		$("#regbtn").click(function(){
    			if(flagPhone&&flagPas&&flagPass){
    				localStorage.setItem("phone",phone);
    				localStorage.setItem("passWord",passWord);
    				register($("#register-phone").val(),$("#register-password").val(),$("#register-passwords").val())
    			}else{
    				if(!flagPhone){
    					$("#register-phone").addClass("form-control is-invalid");
    				}
    				if(!flagPas){
    					$("#register-password").addClass("form-control is-invalid");
    				}
    				if(!flagPass){
    					$("#register-passwords").addClass("form-control is-invalid");
    				}
    				// if (!flagSMS){
    				//   $("#register-sms").addClass("form-control is-invalid")
                    // }
    			}
    		})
          $("#userLogin").click(function (){
            loginByPassword($("#register-phone").val(),$("#register-password").val())
          })
    	})
    </script>
    <div th:insert="~{footer :: foot}"></div>
  </body>

</html>